<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>添加演员</el-breadcrumb-item>
      <el-breadcrumb-item>演员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>


    <!-- 搜索表单 -->
    <el-form @submit.native.prevent :inline="true" class="demo-form-inline">
      <el-form-item label="名字">
        <el-input
        @keyup.native.enter="search"
        v-model="name" placeholder="输入姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">演员列表</el-divider>


    <!-- 呈现列表 -->
    <person v-for="item in actors" 
    :key="item.id"
     :name="item.actor_name"
     :avatar="item.actor_avatar"
     @del="deleltePerson(item.id)"
     ></person>

  </div>
</template>

<script>
import Person from '@/components/Person.vue'
import myaxios from '@/http/MyAxios'
import httpApi from '@/http/index.js'
export default {
  data() {
    return {
      actors: [],
      name:"",
      
       
    }
  },
  // 组件挂载完毕之后执行
  mounted() {
    this.init() //初始化数据
  },

  methods: {
    deleltePerson(id){
      console.log('在父组件中,用户点了叉子:id' + id)

      this.$confirm('此操作将永久删除该演员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          //发送请求删除演员
      // let url = "http://localhost:3010/movie-actor/del"
      // myaxios.post(url,{id})
      let params={id}
      httpApi.actorpApi.delete(params).then(res=>{
        console.log("删除演员结果",res)
        if(res.data.code==200){
          this.search()
        }
      })

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

      
    },

    // 点击查询按钮后模糊查询列表数据
    search(){
      if(this.name.trim()){ //如果有关键字
        let params = {name:this.name}
      httpApi.actorpApi.queryByNameLike(params).then(res=>{
        console.log('模糊查询演员列表',res)
        //更新列表
        this.actors = res.data.data
      })
      }else{ //如果没有关键字
        this.init()
      }
    
    },

    // 初始化数据
    init() {
      // let url = "http://localhost:3010/movie-actors"
      // let params = { page: 1, pagesize: 100 }
      httpApi.actorpApi.queryAllActors().then(res => {
        console.log('加载演员列表结果', res)

        //将res.data.data中储存数据放入this.actors
        this.actors = res.data.data
      })
    }
  },

  components: {
    Person
  },

}
</script>

<style lang="scss" scoped>
p {
  font-size: 0.8em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>